<template>
	<div class="app">
		<div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>
		<div class="header_box">
			<div style="width: 750px;height: 360px;position: absolute;top: 0;left: 0" class="status-bar"></div>
			<div class="header-info">
				<div style="height:80px;width:80px;" @click="setUpClick">
					<image :src="avatar" style="height:80px;width:80px;border-radius: 500px;"></image>
				</div>
				<text style="margin-left:20px;font-size: 30px;color: white;">{{name}}</text>
				<div class="header-info-right">
					<div class="openScaner" >
						<text class="title2"  @click="settingShow">&#xe648;</text>
						<div class="line"></div>
						<text class="title2"  @click="systemClick">&#xe628;</text>
					</div>
				</div>
			</div>
			<div class="header-card">
				<div class="vip-bg-img">
					<image style="width: 700px;height: 140px" src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/vipBgImg.png"></image>
				</div>
				<div style="display:flex;flex-direction: row;justify-content: center;align-content: center;">
					<text class="vipIcon">&#xe630;</text>
					<div style="display: flex;flex-direction: row;align-items: center;height: 50px;">
						<text class="vipTitle">邀请好友成为会员</text>
					</div>
				</div>
				<div class="invitation-button" @click="createQrcodeClick">
					<text class="invitation-button-title">&#xe62a;</text>
				</div>
			</div>
			<div class="header-function">
				<div class="header-content-item" @click="toMember" v-if="checkPermission(['member-list'])">
					<text class="mine-list-icon-member">&#xe6fe;</text>
					<text class="mine-list-title">会员</text>
				</div>
				<div class="header-content-item" @click="toShareCenter">
					<text class="mine-list-icon">&#xe692;</text>
					<text class="mine-list-title">钱包</text>
				</div>
				<div class="header-content-item" @click="declarationClick">
					<text class="mine-list-icon-bd">&#xe635;</text>
					<text class="mine-list-title">报单</text>
				</div>
				<div class="header-content-item" @click="reportClick">
					<text class="mine-list-icon-zd">&#xe6e8;</text>
					<text class="mine-list-title">报表</text>
				</div>
			</div>
		</div>
		<list v-if="inited==true" :time="times">
			<cell>
				<div>
					<my-order @refreshNumber="refreshNumber" v-if="checkPermission(['order.query'])" :time="times"></my-order>
				</div>
				<div>
					<my-shipping @refreshNumber="refreshNumber" v-if="checkPermission(['shipping-list'])" :time="times"></my-shipping>
				</div>
				<div>
					<message @refreshNumber="refreshNumber" :time="times"></message>
				</div>
                <div class="mine-server" @click="toCall">
                    <div class="mine-server-item"><text class="mine-server-itemTitle">点击拨打客服热线:</text><text class="mine-server-itemSubtitle">{{mch.phone}}</text></div>
                    <text class="mine-server-item">服务时间：工作日9：00-20：00</text>
                </div>
				<div style="width: 750px;height: 100px"></div>
			</cell>
		</list>
		<div class="toLogin_content" v-if="inited==false">
			<div>
				<text class="icon">&#xe638;</text>
			</div>
			<div class="toLogin" @click="loginClick"><text style="font-size: 30px;color: white;">登录</text></div>
		</div>
		<!--        邀请码-->
		<div class="isMask" @click="invitationClick" v-if="invitation == true">
			<div class="code_box" @click="">
        <div>
          <image ref="img" class="code_img" :src="codeImg"></image>
        </div>
				<div style="display: flex;flex-direction: row;align-items: center;padding-bottom: 10px">
          <image class="codeIcon" src="http://rzico.oss-cn-shenzhen.aliyuncs.com/img/codeIcone.png"></image>
          <text class="codeTitle">快快邀请好友吧！！！</text>
        </div>
			</div>
      <div class="code_bottom" @click="codeSave">
        <text style="font-size: 28px;color:white">保存图片</text>
      </div>
		</div>
		<setting ref="setting" @getUserInfo="getUserInfo"  style="flex: 1;"></setting>
	</div>
</template>

<script>
	// import checkPermission from '/appboard/app.js'
	import setting from '../components/setting/setting.vue'
	const eeui = app.requireModule("eeui");
	const picker = app.requireModule("picker");
	import {getHome} from '../api/page.js'
	const umengPush = app.requireModule("eeui/umengPush");
	import {
		accessToken
	} from '@/api/user'
	import myOrder from '../components/myOrder/myOrder.vue'
	import myShipping from '../components/myShipping/myShipping.vue'
	import message from '../components/message/message.vue'
    import {getInfo as getInfoUser} from "../api/user.js";
	import {
		createQrcode
	} from '@/api/member'
	import {
		createImage
	} from '@/api/zxing'
	import {
		getInfo
	} from '@/api/mch.js'
    import {
        getInfo as mchGetInfo
    } from '@/api/enterprise.js'
	var globalEvent = app.requireModule('globalEvent');
    const communication = app.requireModule("eeui/communication");
  const network = app.requireModule("eeui/network");
  const modal = app.requireModule('modal')
	export default {
		pageMessage: function (data) {
		       let msg = data.message;
		       if (msg.messageType == 'umengToken') {
		                console.log('获取到友盟token：', msg.token);    //推荐使用调用方法【umengPush.deviceToken()】获取token
			   } else if (msg.messageType == 'notification') {
		                console.log('点击了通知栏消息：', msg);
		                this.times = new Date().getTime()
		                console.log(this.times)
			   }
		},
		data() {
			return {
				isSettingShow:false,
				inited: false,
				orderCurrentTab: 0,
				currentTab: 0,
				pageImage:{},
				statusBarHeight: eeui.getStatusBarHeightPx(),
				tabTitle: [{
						title: '销售订单',
						selectedIcon: 'md-home',
						url: './order/list.js',
						tabName: "order"
					},
					{
						title: '退款售后',
						selectedIcon: 'md-home',
						tabName: "askfor",
						url: './askfor/index.js',
					}
				],
				name: '',
				avatar: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=183246121,2109342373&fm=26&gp=0.jpg',
				imeiId: '',
				qrcode: '',
				codeImg: '',
				invitation: false,
				times: '',
                mch: null,
			};
		},

		created() {

			var _this = this
			this.initIconFont()

			umengPush.deviceToken()

			eeui.setPageBackPressed(null, () => {
				eeui.confirm({
						title: "温馨提示",
						message: "你确定要退出吗？",
						buttons: ["取消", "确定"]
					},
					result => {
						if (result.status === "click" && result.title === "确定") {
							eeui.closePage(null);
						}
					}
				);
			});
			this.imeiId = eeui.getImei()
			this.accessTokenClick()

			globalEvent.addEventListener('WXApplicationDidBecomeActiveEvent', function(e) {
				_this.times = new Date().getTime()
                _this.getUserInfo()

			});


			this.getUserInfo()
            this.getInfoClick()
			// this.loadCanvas()
		},
		mounted() {

		},
		components: {
			myOrder,
			myShipping,
			message,
			setting
		},

		methods: {
			settingHidden(){
				this.isSettingShow=false
			},
			settingShow(){
				if (this.getGlobalData().token == null) {
					this.loginClick()
					return;

				}else{
					this.$refs.setting.settingShow()
				}
			},
			loadMenus(data) {
				var _this = this
				getInfo(
					data
				).then(res => {
					let {
						menus
					} = res.data
					if (menus != null) {
						_this.setPermission(menus)
					}
                    _this.inited = _this.getGlobalData().token != null;
                })
			},
			loginClick() {
			    var _this = this
				eeui.openPage({
					url: 'root://pages/login/msgLogin.js',
					statusBarType: 'immersion',
					statusBarStyle: false
				}, result => {
                    if (result.status == 'stop') {
                        _this.times = new Date().getTime()
                        _this.inited = _this.getGlobalData().token != null;
                        _this.getUserInfo()
                        _this.getInfoClick()
                    }
				});
			},
			accessTokenClick() {
				var _this = this

				storage.getItem("globalData", function(e) {
					if (e.result == "success" && e.data != undefined && e.data != 'undefined') {
						if (!_this.isEmptyString(e.data)) {
							_this.globalData = JSON.parse(e.data);
							let dataStr = JSON.stringify(_this.globalData);
							eeui.setVariate("globalData", dataStr)
						}
					}
					if (_this.getGlobalData().token != null) {

						accessToken({
							token: _this.getGlobalData().token,
							imeiId: _this.imeiId
						}).then(res => {
							if (res.type == 'success') {
								_this.globalData.token = res.data.token;
								_this.globalData.userInfo = res.data.userInfo;
                               // _this.globalData.APP_BASE_API = 'http://boot.rzico.com:8080'
								_this.globalData.menus = null;
								_this.setGlobalData(_this.globalData);
								_this.loadMenus(res.data.token)
							} else if (res.type == 'logout') {
								_this.globalData.token = null;
								_this.setGlobalData(_this.globalData)
								_this.loginClick()
							}
                            _this.getUserInfo()
							_this.times = new Date().getTime()
							umengPush.addAlias(res.data.userInfo.id, 'userId', result => {

							});
						}).catch(error => {

						})

					} else {
						_this.globalData.token = null;
						_this.setGlobalData(_this.globalData)
						_this.loginClick()
					}

				})

			},
			bindChange(data) {
				this.orderCurrentTab = data.index
			},
			orderSwichNav(data) {
				this.orderCurrentTab = data

			},
			swichNav(data) {
				this.currentTab = data

			},
			toMember() {
				var _this = this
				if (this.getGlobalData().token == null) {
					this.loginClick()
					return;

				}
                if (this.checkPermission(['member.query']) == false) {
                    eeui.alert('您没有会员权限', function() {});
                    return
                }
				eeui.openPage({
					url: 'root://pages/member/list.js',
					statusBarType: 'immersion',
					statusBarStyle: false
				}, (result) => {
					if (result.status == 'stop') {
						_this.times = new Date().getTime()
					}
				})
			},
			loadPage(){
				getHome({
					mchId:this.getGlobalData().mchId
				}).then(res=>{
					 this.pageImage=res.data.wxPage
				})
			},
			getUserInfo(data) {

				if(data!=null||data!=''){
					this.times=data
				}

				if (this.getGlobalData().token != null) {
                    getInfoUser().then(response => {
                        const {data} = response
                        this.name = data.userInfo.nickname;
                        this.avatar = data.userInfo.avatar
                        if (data.userInfo.avatar != null) {
                            _this.avatar = data.userInfo.avatar
                        }
                    }).catch(error => {

                    })
				}
			},
			toShareCenter(e) {
				var _this = this
				if (this.getGlobalData().token == null) {
					this.loginClick()
					return;
				}
				eeui.openPage({
					url: 'root://pages/shareCenter/shareCenter.js',
					statusBarType: 'immersion',
					statusBarStyle: false
				}, result => {
					if (result.status == 'stop') {
						_this.times = new Date().getTime()
					}
				});
			},
			declarationClick() {
				if (this.checkPermission(['order.add']) == false) {
					eeui.alert('您没有报单权限', function() {});
					return
				}
				var _this = this
				if (this.getGlobalData().token == null) {
					this.loginClick()
					return;

				}
				eeui.openPage({
					url: 'root://pages/member/declaration/index.js',
					statusBarType: 'immersion',
					statusBarStyle: false
				}, result => {
					if (result.status == 'stop') {
						_this.times = new Date().getTime()
					}
				});
			},
			setUpClick() {
				var _this = this
				if (this.getGlobalData().token == null) {
					this.loginClick()
					return;

				}
				eeui.openPage({
					url: 'root://pages/member/setUp/setUp.js',
					statusBarType: 'immersion',
					statusBarStyle: false
				}, result => {
					if (result.status == 'stop') {
						_this.getUserInfo()
						_this.times = new Date().getTime()
					}
				});
			},
			systemClick() {
				var _this = this
				if (this.checkPermission(['parameter.query']) == false) {
					eeui.alert('您没有修改店铺权限', function() {});
					return
				}
				if (this.getGlobalData().token == null) {
					this.loginClick()
					return;

				}
				eeui.openPage({
					url: 'root://pages/member/system/system.js',
					statusBarType: 'immersion',
					statusBarStyle: false
				}, result => {
					if (result.status == 'stop') {
                        _this.inited = _this.getGlobalData().token != null;
						_this.getUserInfo()
                        _this.getInfoClick()
						_this.times = new Date().getTime()
					}
				});
			},
			createQrcodeClick() {
				if (this.getGlobalData().token == null) {
					this.loginClick()
					return;

				}
				createQrcode().then(res => {
					this.qrcode = res.content
					this.loadPage()
					this.invitation = true
					this.createImageClick()
				}).catch(error => {

				})
			},
			createImageClick() {
				this.codeImg = this.getGlobalData().APP_BASE_API + '/zxing/createImage?mchId=' + this.getGlobalData().mchId+'&data='+ encodeURIComponent(this.qrcode)
			},
			invitationClick() {
				this.invitation = !this.invitation
			},
            refreshNumber(){
                this.times = new Date().getTime()
            },
            reportClick(){
                var _this = this
                if (this.getGlobalData().token == null) {
                    this.loginClick()
                    return;
                }
                eeui.openPage({
                    url: 'root://pages/report/index.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, (result) => {
                    if (result.status == 'stop') {
                        _this.times = new Date().getTime()
                    }
                })
            },
            getInfoClick() {
                let _this = this
                console.info("我被执行了")
                mchGetInfo({"mchId":this.getGlobalData().mchId}).then(
                    res => {
                        console.log(res)
                        if (res.type == 'success') {
                            _this.mch = res.data
                        }
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            toCall(){
                communication.call(this.mch.phone)
            },
      codeSave(){
			  var _this = this
        this.$refs['img'].save(function(result) {
          console.log(result)
          if (result.success == true){
            modal.toast({ message: "保存成功"})
            _this.invitation = false
          }else {
            modal.toast({ message: "保存失败"})
            _this.invitation = false
          }
        });
      }
		}
	};
</script>

<style scoped>
	.app,
	body {
		background-color: #e6e6e6;
	}

	.app {
		flex: 1;
	}

	.navbarc {
		width: 750px;
		height: 100px;
		background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));
	}
	.line{
		height: 30px;
		margin-left: 20px;
		margin-right: 20px;
		width: 0.5px;
		background-color: #000000;
	}
	.text {
		font-size: 40px;
		color: white;
	}
	.openScaner {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-left: 20px;
		padding-right: 20px;
		/* margin-top: 20px; */
		/* width: 150px; */
		height: 60px;
		border-radius: 50px;
		/* margin-left: 5px; */
		background-color: rgba(255, 255, 255, 0.5);
		border-color: rgba(0, 0, 0, 0.3);
		border-style: solid;
		border-width: 0.2px;
	}
	.canvas_content{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.toLogin {
		background-image: linear-gradient(to left, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
		height: 70px;
		width: 200px;
		margin-top: 20px;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title2 {
		font-size: 32px;
		font-family: iconfont2;
		/* color: rgba(26, 26, 30, 1); */
		color: #000000;
		/* opacity: 0.5; */
		margin-right: 5px;
	}
	.toLogin_content {
		height: 200px;
		width: 750px;
		margin-top: 140px;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: #004444; */
	}

	.status-bar {
		background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));
	}

	.header_content {
		display: flex;
		flex-direction: row;
		align-items: center;
		/*padding-top: 40px;*/
		padding-bottom: 40px;
		background-image: linear-gradient(to right, #0ED2F7, rgba(83, 168, 255, 1));
		box-sizing: border-box;
	}

	.icon {
		font-family: iconfont2;
		color: rgba(0,0,0,0.3);
		font-size: 100px;
	}
  .codeIcon{
    width: 40px;
    height: 40px;
  }
  .codeTitle{
    font-size: 22px;
    margin-left: 10px;
    margin-top: 10px;
  }
	.header-content-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mine-list-icon {
		font-family: iconfont2;
		font-size: 60px;
		margin-bottom: 10px;
		color: #E6A23C;
	}

	.mine-list-icon-member {
		font-family: iconfont2;
		font-size: 60px;
		margin-bottom: 10px;
		color: #67C23A;
	}

	.mine-list-icon-bd {
		font-family: iconfont2;
		font-size: 60px;
		margin-bottom: 10px;
		color: #F56C6C;
	}

	.mine-list-icon-zd {
		font-family: iconfont2;
		font-size: 60px;
		margin-bottom: 10px;
		color: rgba(83, 168, 255, 1);
	}

	.mine-list-title {
		font-size: 26px;
		color: rgba(0, 0, 0, 0.5);
	}

	.order-content {
		flex: 1;
	}

	.tabbar {
		flex: 1;
		width: 750px;
	}

	.navbar {
		width: 750px;
		height: 100px;
	}

	.text {
		font-size: 36px;
	}

	.order-choose-line {
		width: 750px;
		padding-left: 26px;
		padding-right: 26px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100px;
		flex-direction: row;
		background-color: rgb(248, 248, 248);
	}

	.choose-line {
		width: 750px;
		padding-left: 26px;
		padding-right: 26px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100px;
		flex-direction: row;
		background-color: rgb(253, 253, 253);
	}

	.order_choose-list {
		width: 150px;
		display: flex;
		box-sizing: border-box;
		padding-top: 20px;

		flex-direction: column;
		height: 130px;
		align-items: center;
		justify-content: center;
	}

	.coupon_choose-list {
		width: 375px;
		display: flex;
		flex-direction: column;
		height: 100px;
		align-items: center;
		justify-content: center;
	}

	.order_choose_title {
		font-size: 26px;
		font-weight: 400;
		color: rgba(215, 38, 28, 1);
		display: block;
		padding-bottom: 15px
	}

	.order_choose_title_no {
		font-size: 26px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		display: block;
		padding-bottom: 15px;
	}

	.coupon_choose_title {
		font-size: 28px;
		font-weight: 400;
		color: rgba(215, 38, 28, 1);
		display: block;
		padding-bottom: 15px
	}

	.coupon_choose_title_no {
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		display: block;
		padding-bottom: 15px;
	}

	.coupon_choose_line {
		width: 49px;
		height: 10px;
		border-radius: 1px;
		background-color: white;
	}

	.order_choose_line_no {
		width: 20px;
		height: 4px;
		background-color: white;
		/* margin-top: 20px; */
	}

	.order_choose_line {
		width: 10px;
		height: 4px;
		background-color: rgb(248, 248, 248);
	}

	.coupon_choose_line_no {
		width: 49px;
		height: 10px;
		border-radius: 1px;
		background-image: linear-gradient(to top, rgba(231, 91, 83, 1), rgba(246, 171, 171, 1));
	}

	.headerIndex_left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.openScaner-text {
		font-size: 25px;
		font-weight: 500;
		color: rgba(26, 26, 30, 1);
	}
	.headerIndex_leftTitle {
		font-size: 30px;
		color: white;
		width: 150px;
		lines: 1;
		text-overflow: ellipsis;
		margin-left: 20px;
	}

	.headerIndex_leftImg {
		width: 60px;
		height: 60px;
		border-radius: 500px;
		margin-left: 30px;
		overflow: hidden;
	}

	.headerIndex_rightIcon {
		font-family: iconfont2;
		font-size: 45px;
		color: white;
		margin-right: 30px;
		/*height: 60px;*/
		/*line-height: 50px;*/
	}

	.header_box {
		display: flex;
		align-items: center;
		height: 443px;
		position: relative;
	}

	.header-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30px;
		margin-bottom: 30px;
		padding-left: 30px;
		width: 750px;
		box-sizing: border-box;
		position: relative;
	}

	.header-card {
		width: 690px;
		height: 130px;
		background-image: linear-gradient(to right, #f7dec5, #f0d0a7);
		border-radius: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
		position: relative;
	}

	.header-function {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: white;
		width: 690px;
		padding-top: 20px;
		padding-bottom: 20px;
		border-radius: 10px;
		margin-top: 30px;
	}

	.header-info-right {
		position: absolute;
		top: 10px;
		right: 30px
	}

	.invitation-button {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40px;
		flex-direction: row;
		margin: 0;
	}

	.invitation-button-title {
		font-size: 60px;
		font-family: iconfont2;
		color: white;
	}

	.vipIcon {
		font-family: iconfont2;
		font-size: 50px;
	}

	.vipTitle {
		font-size: 30px;
		margin-left: 20px;
		line-height: 60px;
		height: 50px;
	}

	.vip-bg-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 690px;
		height: 130px;
		overflow: hidden;
		border-radius: 16px;
	}

	.isMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.code_box {
    padding: 20px;
		background-color: white;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.code_img {
		width: 380px;
		height:380px;
	}
    .mine-server {
        margin-top: 50px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mine-server-item {
		margin-top: 10px;
        text-align: center;
        font-size: 20px;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(181, 181, 182, 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .mine-server-itemTitle{
        text-align: center;
        font-size: 20px;
        font-family: PingFangSC;
        font-weight: 400;
        color: rgba(181, 181, 182, 1);
    }

    .mine-server-itemSubtitle {
        color: #6782c0;
    }
    .code_bottom{
      padding: 20px 150px;
      border-radius: 12px;
      margin-top: 40px;
      background-image: linear-gradient(to bottom, rgba(236, 95, 88, 1), rgb(252, 147, 147));
    }
</style>
